<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Sailnote</title>

<link rel="stylesheet" href="public/css/bootstrap.min.css"/>
<link rel="stylesheet" href="public/css/font-awesome.css"/>
<link rel="stylesheet" href="public/css/jquery.tagsinput.css"/>
<link rel="stylesheet" href="public/css/bootstrap-goog.css"/>
<link rel="stylesheet" href="public/css/theme/typo.css"/>
<link rel="stylesheet" href="public/css/app.css"/>
<link rel="stylesheet" href="public/css/app-note.css"/>
<script src="public/js/jquery.js"></script>
<script src="public/js/angular.js"></script>
<script src="public/js/es5-shim.js"></script>
<script src="public/js/underscore.js"></script>
<script>
    angular.module("app.config", []).constant('urlBase', "");
</script>
<script src="public/js/app.js"></script>
<script src="public/js/controllers/noteController.js"></script>
<script src="public/js/modules/ui-bootstrap.js"></script>
<script src="public/js/resources/bsResource.js"></script>
<script src="public/js/resources/NoteBook.js"></script>
<script src="public/js/resources/Note.js"></script>
<script src="public/js/mockup.js"></script>
<script src="public/js/services/localStorageService.js"></script>
<script src="public/js/services/UtilService.js"></script>
<script src="public/js/services/MessageBoxService.js"></script>
<script src="public/js/directives/powerButtonDirective.js"></script>
<script src="public/js/directives/tagInputDirective.js"></script>
<script src="public/js/directives/buttonInputDirective.js"></script>
<script src="public/js/directives/highlightWordDirective.js"></script>
<script src="public/js/directives/uploadBoxDirective.js"></script>
<script src="public/js/directives/resizeDirective.js"></script>
<script src="public/js/directives/flexBoxDirective.js"></script>
<script src="public/js/directives/dockableFlexBoxDirective.js"></script>
<script src="public/js/directives/simpleDirective.js"></script>
<script src="public/js/directives/waitableDirective.js"></script>
<script src="public/js/directives/draggableDirective.js"></script>
<script src="public/js/directives/contextMenuDirective.js"></script>
<script src="public/js/directives/keyboardDirective.js"></script>
<script src="public/js/directives/dndDirective.js"></script>
<script src="public/js/util/ace/ace.js"></script>
<script src="public/js/util/marked.js"></script>
<script src="public/js/util/highlight.pack.js"></script>
<script src="public/js/modules/ui-utils.js"></script>
<script src="public/js/modules/ui-ssnau.js"></script>
<script src="public/js/modules/renderer-ssnau.js"></script>

<style>
body {
	padding:0px;
	margin:0px;
	border-radius: 10px;
}
.titlebar {
	width:100%;
	height: 30px;
	margin:0px;
	padding:0px;
	background:steelblue;
	-webkit-user-select: none;
	-webkit-app-region: drag;
}
.titlebar .titlebar-button {
	line-height:30px;
	font-size:16px;
	padding:0px 3px; 
	cursor: pointer;
}
.titlebar-button.icon-remove {
	padding-right:8px;
}
.titlebar .titlebar-button:hover {
	opacity: 0.5;
}
.test:hover {
	opacity: 0.5;
}
</style>
<script>
var gui = require("nw.gui");
$(function(){
	$("#close").click(function(){
		var win = gui.Window.get();
		win.close();
	});
});
</script>

</head>
<body full-window="" flex-box="" class="flex flex-column" style="padding-top:0px;" ng-controller="noteController" ng-app="app">
<div style="height:32px;" class="note-header">
    <img src="public/img/title.png" />
    <a href="/logout" class="logout"><i class="icon-off"></i>&nbsp;退出</a>
    <div class="welcome">欢迎你，<span text="${user.name}"></span></div>
</div>
<div  class="flex f1" flex-box="">
<div class="navigation">
    <div class="input-append" >
        <input class="input-medium search-query" ng-model="searchText" type="text" ui-keydown="{'13': performSearch}"/>
        <div class="btn-group" >
            <button class="btn" tabindex="-1" ng-click="performSearch()">搜索</button>
            <button class="btn dropdown-toggle" has-dropdown="" tabindex="-1">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a href="javascript:void(0)" ng-click="setSearchType('all')">
                        <i class="icon-ok" ng-show="searchType == 'all'"></i>搜索全部文字
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" ng-click="setSearchType('title')">
                        <i class="icon-ok" ng-show="searchType == 'title'" ></i>只搜索标题
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="javascript:void(0)" ng-click="setSearchScope(-1)">
                        <i class="icon-ok" ng-show="searchScope == -1"></i>
                        搜索所有笔记本
                    </a>
                </li>
                <li ng-show="selectedBook">
                    <a href="javascript:void(0)" ng-click="setSearchScope(selectedBook.id)">
                        <i class="icon-ok" ng-show="searchScope == selectedBook.id"></i>
                        仅搜索来自[{{selectedBook.name}}]的笔记
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <accordion close-others="false">
        <accordion-group heading="快捷方式" class="shortcut-accordion" ng-class="{collapsed: !isShortcutOpen}" is-open="$parent.isShortcutOpen">
            <ul>
                <li ng-repeat="shortcut in shortcuts" class="nav-entry" ng-class="{selected: shortcut == selectedShortcut}" ng-click="selectShortcut(shortcut)">
                    <a href="javascript:void(0)" style="padding-top:2px;padding-bottom:2px;">
                        <i class="icon-bookmark"></i>&nbsp;&nbsp;<span>{{shortcut.name}}</span>
                    </a>
                </li>
            </ul>
        </accordion-group>
        <accordion-group class="notebook-accordion" ng-class="{collapsed: !isNotebookOpen}" style="position:relative;" is-open="$parent.isNotebookOpen">
            <accordion-heading>
                笔记本 <i class="icon-plus add-notebook clickable" ng-click="opencreateNoteBookDialog();$event.stopPropagation();"></i>
            </accordion-heading>
            <ul>
                <li class="nav-entry" ng-class="{selected: notebook == selectedBook}" ng-repeat="notebook in notebooks" ui-dnd="{drop:dropNotebook, allowDrop: notebookAllowDrop}">
                    <a href="javascript:void(0)"
                       has-contextmenu=""
                       ng-click="selectNotebook(notebook);queryNotesFromNoteBookId(notebook.id)">
                        <i class="icon-book"></i>&nbsp;&nbsp;
                        <span
                              contenteditable="true"
                              contenteditable-name="title"
                              contenteditable-config="{enable: 'notebook.$editing_name',onchange:'', singleLine: true, max: 20}"
                              ng-model="notebook.name"
                              ui-keydown="{13:''}"
                              ng-click="$event.stopPropagation()"></span>
                    </a>
                    <ul class="dropdown-menu context-menu" style="font-size:12px;" ng-click="$event.stopPropagation()">
                        <li>
                            <a href="javascript:void(0)" ng-click="renameNotebook(notebook)">重命名</a>
                            <a href="javascript:void(0)" ng-click="deleteNotebook(notebook)">删除</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </accordion-group>
        <accordion-group heading="标签"  class="tag-accordion" ng-class="{collapsed: !isTagOpen}" is-open="$parent.isTagOpen"   >
            <ul>
                <li ng-repeat="tag in tags" class="nav-entry" ng-class="{selected: tag == selectedTag}" ng-click="selectTag(tag)">
                    <a href="javascript:void(0)" style="padding-top:2px;padding-bottom:2px;" >
                        <i class="icon-tag"></i>&nbsp;&nbsp;<span>{{tag.name}} ({{tag.nob}})</span>
                    </a>
                </li>
            </ul>
        </accordion-group>
    </accordion>
</div>
<div class="delimeter delimeter-row"></div>
<div class="file-list flex flex-column">
    <div class="folder-name flex" >
        <div has-dropdown="" class="clickable" style="padding:0px 5px;">
            <span style="font-size:14px;" ng-bind="'按'+sortMethod.name+'排序'" ></span>&nbsp;<i class="icon-angle-down "></i>
        </div>
        <ul class="dropdown-menu" style="font-size:12px;">
            <li ng-repeat="sm in sortMethods">
                <a href="javascript:void(0)" ng-click="applySortMethod(sm)"><i class="icon-ok" ng-show="sm == sortMethod"></i>{{sm.name}}</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="javascript:void(0)" ng-click="applySortOrder('asc')"><i class="icon-ok" ng-show="sortOrder == 'asc'"></i>升序</a>
            </li>
            <li>
                <a href="javascript:void(0)" ng-click="applySortOrder('desc')"><i class="icon-ok" ng-show="sortOrder == 'desc'"></i>降序</a>
            </li>
        </ul>
        <i class="icon-plus clickable" ng-click="createNote()" style="position:absolute;top:0px;right:10px;padding:0px 5px;line-height: 40px;"></i>
    </div>
    <div class="files" waitable="loadingNoteList" waitable-info="加载笔记列表" waitable-css="font-size:14px;opacity:.8">
        <div class="file" ng-repeat="note in notes" ng-click="selectNote(note)" ng-class="{selected: selectedNote == note}" ui-dnd="{drag:'dragNote(note)'}">
            <div class="file-item" has-contextmenu="" >
                <div class="file-title">
                    <i class="icon-file" style="opacity: .7"></i>&nbsp;&nbsp;
                        <span class="note-title note-index-{{note.id}}"
                              contenteditable="true"
                              contenteditable-name="title"
                              contenteditable-config="{onchange:'note.dirty=true', singleLine: true, max: 20}"
                              ng-model="note.title"
                              ui-keydown="{13:'saveNote(note)'}"
                              ng-click="$event.stopPropagation()"></span>
                </div>
                <div class="file-priview" style="font-size:12px;min-height:40px;" >
                    <span ng-bind="note.created_at | date:'yyyy-MM-dd HH:mm'" style="margin-right: 5px;color:rgb(50,114,154)"></span>
                    <span ng-bind="note.ppp" style="word-break: break-all;"></span>
                </div>
            </div>
            <ul class="dropdown-menu context-menu" style="font-size:12px;" ng-click="$event.stopPropagation()">
                <li>
                    <a href="javascript:void(0)" ng-click="deleteNote(note)">删除</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="delimeter delimeter-row"></div>
<div class="note-box flex flex-column f1" waitable="loadingNote" waitable-info="加载笔记" waitable-css="font-size:24px;opacity:.8" fill-flexable="">
    <div class="note-box-toolbar flex">
        <div class="file-edit-info">
            <div class="btn-group">
                <button class="btn" ng-click="saveNote(selectedNote)" ng-class="{disabled: !selectedNote.dirty}">
                    <i class="icon-spinner icon-spin" ng-show="savingNote"></i><span>保存</span>
                </button>

            </div>
        </div>
        <div class="tags-info">
                <span class="label" ng-repeat="tag in selectedNote.tags" style="margin-left:5px;">
                    <i class="icon-tag icon-white" style="margin-right:1px;"></i>{{tag}}
                </span>
        </div>
        <div class="note-info f1 flex flex-pull-right" style="padding-right: 20px; font-size: 12px;">
            <div class="note-info-item" has-dropdown><i class="icon-info-sign"></i> 大纲</div>
            <ul class="dropdown-menu">
                <li ng-repeat="heading in outline">
                    <a ng-click="setTargetPlace('#' + heading.id)">{{heading.text}}</a>
                </li>
            </ul>
            <div class="note-info-item"><i class="icon-info-sign"></i> 信息</div>
            <div class="note-info-item"><i class="icon-reorder"></i> 工具</div>
            <div class="note-info-item" has-dropdown=""><i class="icon-eye-close"></i> 显示</div>
            <ul class="dropdown-menu">
                <li >
                    <a ng-click="toggleEditBox()"><i class="icon-ok" ng-show="bShowEditBox"></i>启用编辑</a>
                    <a ng-click="togglePreviewBox()"><i class="icon-ok" ng-show="bShowPreviewBox"></i>启用预览</a>
                    <a ng-click="openPurePreview()" href="javascript:void(0)">Pure Preview</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="note-box-content flex f1" dockable-flex-box="noteFlexBox" flex-box="" fill-flexable="">
        <div class="note-box-edit-area flex flex-column" dockable="" style="width:500px;" id="edit-area-dockable" ng-show="bShowEditBox"  fb-onresize="resizeEditor()">
            <div class="note-box-handler flex" dockable-handler="">
                <div contenteditable="true"
                     contenteditable-name="title"
                     contenteditable-config="{onchange:'selectedNote.dirty=true', onreset:'selectedNote.dirty=false', singleLine: true, max: 20}"
                     class="edit-title"
                     ondragstart="return false;"
                     ng-model="selectedNote.title">
                </div>
                <div class="divider" style="border-right: 1px dashed #cecece;"></div>
                <div class="edit-box-tool-icon clickable" has-dropdown="">
                    <i class="icon-beaker"></i>
                </div>
                <ul class="dropdown-menu">
                    <li ng-repeat="theme in aceThemes">
                        <a ng-click="applyTheme(theme)"><i class="icon-ok" ng-show="theme.selected"></i>{{theme.name}}</a>
                    </li>
                </ul>
                <div class="edit-box-tool-icon clickable" ng-show="!bShowPreviewBox"  ng-click="togglePreviewBox(true)"><i class="icon-resize-small" ></i></div>
                <div class="edit-box-tool-icon clickable" ng-show="bShowPreviewBox"  ng-click="togglePreviewBox(false)"><i class="icon-resize-full"></i></div>
                <div class="edit-box-tool-icon clickable"  ng-click="toggleEditBox(false)"><i class="icon-remove" ></i></div>
            </div>
            <div class="f1" style="position:relative;">
                <div id="markdown-editor"
                     ace-editor="{name: 'markdownEditor', scroll: mdScroll}"
                     upload-paste=""
                     upload-drag=""
                     upload-config="{url: urlBase + 'rest/note/image', limit: 1, success: applyURL}"
                     ui-event="{'mouseenter':'ncSet(\'mouse_on_editor\', true)', 'mouseleave':'ncSet(\'mouse_on_editor\', false)'}"
                     ng-click="alignCursorWithPreview()"
                     ng-model="selectedNote.body"></div>
                <div style="bottom:0px;height:30px;line-height: 30px;position:absolute;margin-left:10px;color:#777;">
                    你可以拖拽图片到编辑器，手动
                    <input  upload-input=""
                            upload-config="{url: urlBase + 'rest/note/image', limit: 1, success: applyURL}"
                            style="position: absolute;margin-left: -80px;width:240px;height: 30px;line-height: 30px;opacity: 0.0001;cursor: pointer;"
                            type="file" />
                    <span style="color:#3078eb">选择文件</span>，或者从剪贴板粘贴
                </div>
            </div>
        </div>

        <div class="delimeter delimeter-row"></div>
        <div class="note-box-preview-area f1 flex flex-column"  dockable="" fill-flexable="" style="position:relative;background:#85c5e5" id="preview-area-dockable" ng-show="bShowPreviewBox">
            <div class="note-box-handler flex" style="position:absolute;left:0px;top:0px;right:0px;box-shadow:none;background:rgba(255,255,255,0)" dockable-handler="" ng-style="previewHandlerStyle" >
                <div style="margin-right:auto;">&nbsp;</div>
                <div class="clickable clickable-icon" ng-click="togglePreviewHandlerStyle()" ng-class="{selected:isPreviewHandlerShow}"><i class="icon-pushpin"></i></div>
                <div class="clickable clickable-icon"><i class="icon-link"></i></div>
                <div class="clickable clickable-icon"><i class="icon-leaf"></i></div>
                <div class="clickable clickable-icon"  ng-show="!bShowEditBox" ng-click="toggleEditBox(true)"><i class="icon-resize-small"></i></div>
                <div class="clickable clickable-icon" ng-show="bShowEditBox" ng-click="toggleEditBox(false)"><i class="icon-resize-full"></i></div>
                <div class="clickable clickable-icon"  ng-click="togglePreviewBox(false)" ><i class="icon-remove" style="margin-right: 5px;"></i></div>
            </div>
            <div class="f1 typo"
                 ui-event="{'mouseenter':'ncSet(\'mouse_on_preview\', true)','mouseleave':'ncSet(\'mouse_on_preview\', false)'}"
                 scroll="previewScroll"
                 scroll-top="{target:'preview_target', offset: 'preview_target_offset'}"
                 style="background:white;align-self:stretch;padding:10px;padding-top:13px;overflow:auto;">
                <h1 ng-bind="selectedNote.title"></h1>
                <hr />
                <div ng-bind-html="markdown(selectedNote.body)"></div>
            </div>
        </div>
    </div>
</div>

</div>
<div id="pure-preview" ng-show="purePreview">
    <!-- TIPS: 在用ng-show时，如果想让元素在js执行前就是display:none的话，必须设成inline的。因为，ng-show会在要显示元素时将display设成'',这样便会直接读样式表的值了。-->
    <i id="pure-preview-close-icon" class="white icon-remove-sign ng-hide" ng-click="purePreview=false" ng-show="purePreview"></i>
    <div id="pure-preview-article" class="typo">
        <h1 ng-bind="selectedNote.title"></h1>
        <hr style="display:none;" ng-show="purePreview" />
        <div ng-bind-html="markdown(selectedNote.body)" ></div>
    </div>
</div>
</body>
</html>
